<script>

export default {
  name: "ShoppingCart",
  props:['cl'],
  computed: {
    selectAll: {
      get() {
        return this.list.every(item =>item.isChecked)
      },
      set(val) {
        console.log(val)
        this.list.forEach(item => {
          item.isChecked = val
        })

      }
    }
  },
  data() {
    return {
      list: [
        {
          id: 1,
          img: 'https://img.alicdn.com/bao/uploaded/i2/4028000468/O1CN01FSCCHj1FKO17wO7UV_!!0-item_pic.jpg_80x80.jpg',
          name: '2021新web前端开发视频课程教程入门精通全栈实战项目零基础培训',
          price: 30.2174,
          num: 3,
          isChecked: true
        },
        {
          id: 2,
          img: 'https://img.alicdn.com/bao/uploaded/i4/352798170/TB1XSlka1GSBuNjSspbXXciipXa_!!0-item_pic.jpg_80x80.jpg',
          name: '现货 你不知道的JavaScript 上卷+中卷+下卷 3册 web前端开发书籍',
          price: 138.854,
          num: 3,
          isChecked: false

        },
        {
          id: 3,
          img: 'https://img.alicdn.com/bao/uploaded/i3/3346581898/O1CN01gjFyT71PtKHdJ4sIK_!!0-item_pic.jpg_80x80.jpg',
          name: '【高阶全套】web前端开发视频教程jQuery网页设计CSS3/javascript',
          price: 199.2123,
          num: 3,
          isChecked: false


        },
        {
          id: 4,
          img: 'https://img.alicdn.com/bao/uploaded/i1/101450072/O1CN01LXctHl1CP17AFZ1qT_!!0-item_pic.jpg_80x80.jpg',
          name: 'JavaScript高级程序设计(第3版)JS入门到精通书籍JavaScript权指南配套前',
          price: 73.936,
          num: 3,
          isChecked: false
        },
        {
          id: 5,
          img: 'https://img.alicdn.com/imgextra/i1/352798170/O1CN01bQTNb42ADuRybT7dd_!!352798170-0-lubanu-s.jpg_80x80q90.jpg',
          name: '计算机网络实验教程 2版二版 高等教育出版社 钱德沛 张力军 计算机网络工程技术参考书 计算机类专业网络实验课程教材图书籍',
          price: 46.5021,
          num: 3,
          isChecked: false
        }
      ],
      remove(index) {
        this.list.splice(index, 1)
      },
      sumAll(key) {
        let a = 0
        if (key === 'num') {
          // for (let i = 0; i < this.list.length; i++) {
          //   if(this.list[i].isChecked){
          //     a += this.list[i].num
          //   }
          // }
          this.list.forEach(item=>{
            if(item.isChecked) {
              a +=item.num
            }
          })
          return a
        }
        if (key === 'price') {
          // for (let i = 0; i < this.list.length; i++) {
          //   if(this.list[i].isChecked) {
          //     a += this.list[i].price*this.list[i].num
          //   }
          // }
          this.list.forEach(item=>{
            if(item.isChecked) {
              a += item.price*item.num
            }
          })
          return a.toFixed(2)
        }
      },


    }
  }

}
</script>

<template>
  <div id="book">
    <div class="select-page" :style="{color:cl}">
      <div class="titleBox">
        <h2>购物车</h2>
        <div class="spanBox">
          <span>已选商品{{ sumAll('num') }}件(不含运费):￥{{ sumAll('price') }}</span>
          <button>结算</button>
        </div>

      </div>
      <div class="titleBox2">
        <div class="titleBox2-1">
          <label>
            <input type="checkbox" v-model="selectAll">
            <span>全选</span>
          </label>
        </div>
        <p>商品信息</p>
        <p class="priceOnlyTittle">单价</p>
        <p>数量</p>
        <p>金额</p>
        <p>操作</p>
      </div>
      <ul v-for="(item,index) in list" :key="item.id">
        <li>
          <input type="checkbox" class="inputTittle" v-model="item.isChecked">

          <div class="information">
            <img :src="item.img">
            <p class="text">{{ item.name }}</p>
          </div>
          <p class="priceOnly">￥{{ item.price.toFixed(2) }}</p>
          <div class="numBox">
            <div class="tab left" @click="item.num===0?0:item.num--">-</div>
            <div class="num">{{ item.num }}</div>
            <div class="tab right" @click="item.num++">+</div>
          </div>
          <p class="price">￥{{ (item.num * item.price).toFixed(2) }}</p>
          <div class="remove" @click="remove(index)">删除</div>
        </li>
      </ul>
    </div>


  </div>

</template>


<style scoped>
.select-page {
  width: 1100px;
  position: relative;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);

  .titleBox {
    width: 100%;
    border-bottom: 1px solid #000;
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 10px;

    .spanBox {
      span {
        margin: 0 10px;
      }
    }
  }

  .titleBox2 {
    user-select: none;
    display: flex;
    justify-content: space-between;
    padding: 25px;

    .priceOnlyTittle {
      padding-left: 25px;
    }

    .titleBox2-1 {
      display: flex;
      justify-content: space-around;
      width: 80px;

      label span {
        margin: 0 7px;
      }
    }
  }

  ul {
    border-radius: 10px;
    font-size: 14px;
    user-select: none;

    li {
      margin: 20px 0;
      background-color: #eee;
      border: 1px solid #eee;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      width: 100%;

      .inputTittle {
        margin: 0 25px;
      }

      .information {
        display: flex;

        .text {
          width: 300px;
          padding: 10px;
        }
      }

      .priceOnly {
        width: 50px;
        margin: 0 15px;
        line-height: 80px;
      }

      .numBox {
        display: flex;
        margin-left: 98px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        padding-top: 30px;

        .tab {
          width: 20px;
          background-color: #fff;
          border: 1px solid #ccc;
          cursor: pointer;
          border-radius: 5px;

        }

        .tab:hover {
          background-color: #e5e5e5;
        }

        .tab:active {
          background-color: #fff;
        }

        .num {
          width: 50px;
          border: 1px solid #ccc;
          margin: 0 1px;
          border-radius: 5px;

        }

      }

      .price {
        margin: 0 100px;
        line-height: 80px;
        width: 50px;

      }

      .remove {
        margin-left: 40px;
        margin-top: 30px;
        background-color: #fff;
        border: 1px solid #ccc;
        cursor: pointer;
        border-radius: 5px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        width: 33px;
      }

      .remove:hover {
        background-color: #e5e5e5;
      }

      .remove:active {
        background-color: #fff;
      }

    }
  }

}

</style>